<template>
  <header class="bg-blue-500 text-white p-4 transition-all duration-500 ease-out fixed w-full z-50" :class="{
    ' shadow-md  text-gray-700 bg-gradient-to-br from-purple-600 to-purple-800 hover:from-purple-500 hover:to-purple-900 transition-all duration-500': isScrolled,
    'bg-transparent': !isScrolled  // 移除 bg-transparent
  }">
    <div class="container mx-auto flex flex-col lg:flex-row justify-between items-center">
      <NuxtLink to="/" class="text-xl font-bold mb-2 lg:mb-0">NUXT3 SSR DEMO</NuxtLink>

      <!-- 移动端汉堡菜单按钮 -->
      <button class="lg:hidden absolute right-4 top-4" @click="toggleMenu">
        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
        </svg>
      </button>

      <!-- 导航菜单 -->
      <nav class="flex flex-col lg:flex-row space-y-2 lg:space-y-0 lg:space-x-4 w-full lg:w-auto" :class="{
        'hidden lg:flex': !isMenuOpen,
      }">
        <NuxtLink to="/" class="hover:underline py-1" @click="closeMenu">官网1首页</NuxtLink>
        <NuxtLink to="/about" class="hover:underline py-1" @click="closeMenu">官网1关于我们</NuxtLink>
        <NuxtLink to="/home" class="hover:underline py-1" @click="closeMenu">官网2</NuxtLink>
        <NuxtLink to="/art" class="hover:underline py-1" @click="closeMenu">官网3静态页面</NuxtLink>
        <NuxtLink to="/admin" class="hover:underline py-1" @click="closeMenu">后台管理</NuxtLink>
        <NuxtLink to="/gaspDemo" class="hover:underline py-1" @click="closeMenu">gaspDemo</NuxtLink>
        <NuxtLink to="/comCollection" class="hover:underline py-1" @click="closeMenu">组件集合</NuxtLink>
        <div v-if="token" class="hover:underline py-1 cursor-pointer" @click="logout()">
          logout
        </div>
      </nav>
    </div>
  </header>
</template>

<script setup lang="ts">
import StorageUtil from '@/utils/storage';

const isMenuOpen = ref(false);

// 切换菜单显示状态
const toggleMenu = () => {
  isMenuOpen.value = !isMenuOpen.value;
};

// 关闭菜单
const closeMenu = () => {
  isMenuOpen.value = false;
};

// 使用 ref 初始化，避免直接调用 StorageUtil.get
let token = ref<string | undefined>();
const isScrolled = ref(false)

const handleScroll = () => {
  isScrolled.value = window.scrollY > 50
}

// 在 onMounted 钩子中访问 localStorage
onMounted(() => {
  token.value = StorageUtil.get('token');
  window.addEventListener('scroll', handleScroll)

});

onBeforeUnmount(() => {
  window.removeEventListener('scroll', handleScroll)
})

const logout = () => {
  token.value = undefined;
  StorageUtil.remove('access_token')
  StorageUtil.remove('refresh_token')
  navigateTo('/');
  closeMenu();
}
</script>

<style scoped>
/* 添加一些基础样式确保移动端体验 */
@media (max-width: 767px) {
  /* nav {
    background-color: rgba(59, 130, 246, 0.9);
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1000;
    padding: 1rem;
  } */

  .hidden {
    display: none;
  }

  .block {
    display: flex;
  }
}
</style>